<template>
  <div class="hello">
    <div class="top">
      <div class="day">
        <div class="day_top">
          <img src="../../static/images/img_03.png" alt="" />
          <div>MPF <span>2024</span></div>
        </div>
        <div class="day_bottom">
          <div class="day_bottom_left">
            <div>海丝论坛</div>
            <div>倒计时</div>
          </div>
          <div class="number">64</div>
          <div class="mont">天</div>
        </div>
      </div>
      <div class="box">
        <div class="box_item" v-for="(item, index) in arrList" :key="index">
          <div class="item_top">
            <div
              class="left"
              @click="getBack2(index)"
              :style="[BackIndex == index ? ActiveBack2 : ActiveBack]"
            >
              {{ item.title1 }}
              <div :class="BackIndex == index ? 'sanjiao2' : 'sanjiao'"></div>
            </div>
            <div
              @click="getBack(index)"
              :style="[BackIndex == index ? ActiveBack : ActiveBack2]"
              class="right"
            >
              {{ item.title2 }}
            </div>
          </div>
          <div class="item-bottom" :style="getStyle(item.title1, 'back')">
            <div class="item-left">
              <img :src="item.img" :style="getStyle(item.title1, 'width')" alt="" />
              <div class="num">
                <div class="insert">
                  国内 {{ BackIndex == index ? item.insert : item.insert2 }}
                </div>
                <div>国外 {{ BackIndex == index ? item.outset : item.outset2 }}</div>
              </div>
            </div>
            <div class="number">
              {{ BackIndex == index ? item.number : item.number2 }}
            </div>
          </div>
        </div>
        <div class="box_item" v-for="(item, index) in arrList2" :key="index">
          <div class="item_top item_top2">
            {{ item.title1 }}
          </div>
          <div class="item-bottom" :style="getStyle(item.title1, 'back')">
            <div class="item-left">
              <img :src="item.img" :style="getStyle(item.title1, 'width')" />
              <div class="num">
                <div class="insert">{{ item.insert ? item.insert : "&nbsp;" }}</div>
                <div>{{ item.outset ? item.outset : "&nbsp;" }}</div>
              </div>
            </div>
            <div class="number">
              {{ item.number }}
            </div>
          </div>
        </div>
        <div class="box_item">
          <div class="item_top">
            <div
              class="left"
              @click="getBack2(4)"
              :style="[BackIndex == 4 ? ActiveBack2 : ActiveBack]"
            >
              友好港口
              <div :class="BackIndex == 4 ? 'sanjiao2' : 'sanjiao'"></div>
            </div>
            <div
              class="right"
              @click="getBack(4)"
              :style="[BackIndex == 4 ? ActiveBack : ActiveBack2]"
            >
              嘉宾
            </div>
          </div>
          <div class="item-bottom" style="background: #e5b12e">
            <div class="item-left">
              <img src="../../static/images/img_25.png" style="width: '60px'" alt="" />
              <div class="num">
                <div class="insert">&nbsp;</div>
                <div>&nbsp;</div>
              </div>
            </div>
            <div class="number">{{ BackIndex == 4 ? 10 : 12 }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div id="main"></div>
      <div id="main2"></div>
      <div class="echartsBox">
        <div class="btn">
          <div :class="active == '邀请' ? 'active' : ''" @click="setData('邀请')">
            邀请
          </div>
          <div :class="active == '报名' ? 'active' : ''" @click="setData('报名')">
            报名
          </div>
          <div :class="active == '签到' ? 'active' : ''" @click="setData('签到')">
            签到
          </div>
        </div>
        <div id="main3"></div>
      </div>
      <div class="echartsBox" style="width: 100%">
        <div class="btn">
          <div :class="active2 == '邀请' ? 'active' : ''" @click="setData2('邀请')">
            邀请
          </div>
          <div :class="active2 == '报名' ? 'active' : ''" @click="setData2('报名')">
            报名
          </div>
          <div :class="active2 == '签到' ? 'active' : ''" @click="setData2('签到')">
            签到
          </div>
        </div>
        <div id="main4"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "mobile",
  data() {
    return {
      arrList: [
        {
          title1: "报名人数",
          title2: "单位",
          img: require("../../static/images/img_06.png"),
          insert2: 6,
          insert: 8,
          outset2: 15,
          outset: 17,
          number2: 9,
          number: 5,
        },
        {
          title1: "邀请人数",
          title2: "单位",
          img: require("../../static/images/img_08.png"),
          insert2: 6,
          insert: 9,
          outset2: 3,
          outset: 9,
          number2: 9,
          number: 3,
        },
        {
          title1: "签到人数",
          title2: "单位",
          img: require("../../static/images/img_10.png"),
          insert2: 3,
          insert: 5,
          outset2: 15,
          outset: 10,
          number2: 5,
          number: 1,
        },
        {
          title1: "重要单位",
          title2: "嘉宾",
          img: require("../../static/images/img_13.png"),
          insert2: 0,
          insert: 3,
          outset2: 0,
          outset: 4,
          number2: 0,
          number: 9,
        },
      ],
      arrList2: [
        {
          title1: "签到国家(地区)",
          img: require("../../static/images/img_20.png"),
          insert: "单位 1",
          outset: "嘉宾 1",
          number: 1,
        },
        {
          title1: "报名国家(地区)",
          img: require("../../static/images/img_28.png"),
          insert: "",
          outset: "",
          number: 1,
        },
        {
          title1: "一带一路国家",
          img: require("../../static/images/img_23.png"),
          insert: "",
          outset: "",
          number: 0,
        },
      ],
      dataList: [
        { row_name: "媒体", all_count: 1 },
        { row_name: "政府单位", all_count: 19 },
        { row_name: "港口单位", all_count: 84 },
        { row_name: "研究机构及高校", all_count: 5 },
        { row_name: "科技、金融、工程等配套单位", all_count: 70 },
        { row_name: "组织协会", all_count: 5 },
        { row_name: "航运物流单位", all_count: 19 },
        { row_name: "货主单位", all_count: 7 },
        { row_name: "集团", all_count: 9 },
      ],
      dataList2: [
        { row_name: "未知", all_count: 4 },
        { row_name: "亚洲", all_count: 90 },
        { row_name: "北美洲", all_count: 13 },
        { row_name: "国际", all_count: 3 },
        { row_name: "大洋洲", all_count: 3 },
        { row_name: "欧洲", all_count: 60 },
        { row_name: "非洲", all_count: 11 },
      ],
      active: "邀请",
      active2: "邀请",
      ActiveBack: {
        background: "#0e3056",
        color: "#FFF",
      },
      ActiveBack2: {
        background: "#FFF",
        color: "#0e3056",
      },
      BackIndex: 10,
      BackIndex2: 10,
    };
  },
  mounted() {
    this.getEcharts1();
    this.getEcharts2();
    this.getEcharts3();
    this.getEcharts4();
  },
  methods: {
    getStyle(e, set) {
      let color = "";
      let width = "";
      if (e == "邀请人数") {
        color = "#044eb3";
        width = "70px";
      } else if (e == "签到人数") {
        color = "#f950bc";
      } else if (e == "重要单位") {
        color = "#30bbff";
      } else if (e == "签到国家(地区)") {
        color = "#0272ff";
        width = "55px";
      } else if (e == "报名国家(地区)") {
        color = "#21d752";
        width = "55px";
      } else if (e == "一带一路国家") {
        color = "#9f52f7";
        width = "55px";
      }
      let obj = {};
      if (set == "back") {
        obj = {
          background: color,
        };
      } else {
        obj = {
          width: width,
        };
      }
      return obj;
    },
    getEcharts1() {
      var chartDom = document.getElementById("main");
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        grid: {
          top: 150,
          bottom: 50,
        },
        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          orient: "horizontal", //布局方式：  horizontal/vertical
          x: "center", // 水平安放位置，默认为全图居中，可选： 'center' ¦ 'left' ¦ 'right'  或 {number}（x坐标，单位px）
          top: "80", //垂直安放位置，默认为全图顶端，可选： 'top' ¦ 'bottom' ¦ 'center' 或 {number}（y坐标，单位px）
          textStyle: {
            // 主标题样式
            fontSize: "15",
          },
        },
        title: {
          text: "统计分析图",
          left: "center",
          top: 40,
          textStyle: {
            // 主标题样式
            fontSize: "20",
          },
        },
        xAxis: {
          type: "category",
          data: ["05/12", "05/13", "05/14", "05/15", "05/16", "05/17", "05/18"],
          axisLine: {
            show: false, // 显示x轴线
          },
        },

        yAxis: {
          type: "value",
          axisLine: {
            show: false, // 显示x轴线
          },
          splitLine: {
            //网格线：隐藏
            show: false,
            lineStyle: {
              color: "rgba(127, 127, 127, 1)",
              type: "dashed", // 线型为虚线
            },
          },
        },
        series: [
          {
            name: "邀请人数",
            data: [0, 0, 5, 18, 10, 5, 0],
            type: "line",
            symbol: "circle",
            smooth: true,
          },
          {
            name: "报名人数",
            data: [0, 0, 10, 8, 1, 5, 0],
            type: "line",
            symbol: "circle",
            smooth: true,
          },
          {
            name: "签到人数",
            data: [0, 1, 6, 2, 1, 10, 0],
            type: "line",
            symbol: "circle",
            smooth: true,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    getEcharts2() {
      var chartDom = document.getElementById("main2");
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        grid: {
          top: 100,
          bottom: 50,
        },
        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          orient: "horizontal", //布局方式：  horizontal/vertical
          x: "center", // 水平安放位置，默认为全图居中，可选： 'center' ¦ 'left' ¦ 'right'  或 {number}（x坐标，单位px）
          top: "80", //垂直安放位置，默认为全图顶端，可选： 'top' ¦ 'bottom' ¦ 'center' 或 {number}（y坐标，单位px）
          textStyle: {
            // 主标题样式
            fontSize: "15",
          },
        },
        title: {
          text: "历届参会人数",
          left: "center",
          top: 40,
          textStyle: {
            // 主标题样式
            fontSize: "20",
          },
        },
        xAxis: {
          type: "category",
          data: ["第一届", "第二届", "第三届", "第四届", "第五届", "第六届", "第七届"],
          axisLine: {
            show: false, // 显示x轴线
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            //网格线：隐藏
            show: false,
            lineStyle: {
              color: "rgba(127, 127, 127, 1)",
              type: "dashed", // 线型为虚线
            },
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            barWidth: 20,
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              formatter: "{c}", // 标签格式器，{c} 代表数据值
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    getEcharts3() {
      var chartDom = document.getElementById("main3");
      var myChart = this.$echarts.init(chartDom);
      // myChart.dispatchAction({
      //   type: "downplay", //取消高亮
      //   seriesIndex: 0,
      //   dataIndex: this.index,
      // });
      const data = this.dataList.map((e) => {
        return {
          name: e.row_name,
          value: e.all_count,
        };
      });
      var option;

      option = {
        tooltip: {
          trigger: "item",
        },
        title: {
          text: "行业占比(人数)",
          left: "20",
          top: 40,
          textStyle: {
            // 主标题样式
            fontSize: "20",
          },
        },
        legend: [
          {
            show: false,
            top: "20%",
            type: "scroll",
            orient: "horizontal",
            align: "left",
          },
        ],
        series: [
          {
            name: "",
            type: "pie",
            radius: ["20%", "40%"],
            center: ["50%", "55%"],
            data: data,
            label: {
              //echarts饼图内部显示百分比设置
              show: true,
              position: "outside", //outside 外部显示  inside 内部显示
              // position: "outer",
              // alignTo: "edge",
              // margin: 10,
              formatter: function (name) {
                if (name.name.length <= 4) {
                  return name.name + "\n" + name.value + " (" + name.percent + "%" + ")";
                } else if (name.name.length > 4 && name.name.length < 8) {
                  return (
                    name.name.slice(0, 4) +
                    "\n" +
                    name.name.slice(4, 7) +
                    "\n" +
                    name.value +
                    " (" +
                    name.percent +
                    "%" +
                    ")"
                  );
                } else {
                  return (
                    name.name.slice(0, 4) +
                    "\n" +
                    name.name.slice(4, 8) +
                    "\n" +
                    name.name.slice(8, 13) +
                    "\n" +
                    name.value +
                    " (" +
                    name.percent +
                    "%" +
                    ")"
                  );
                }
              },
              color: "#0e3056", //颜色
              fontSize: 11, //字体大小
            },
          },
        ],
      };
      // let max = this.dataList.reduce(
      //   //计算出最大值以及最大值对应的索引
      //   (a, c, i) => (c.all_count > a ? ((this.index = i), c.all_count) : a),
      //   0
      // );
      // this.dataList.forEach((item, index) => {
      //   if (max == item.all_count) {
      //     this.index = index;
      //   }
      // });
      option && myChart.setOption(option);

      // myChart.dispatchAction({
      //   type: "highlight",
      //   seriesIndex: 0,
      //   dataIndex: this.index,
      // });
    },
    getEcharts4() {
      var chartDom = document.getElementById("main4");
      var myChart = this.$echarts.init(chartDom);
      // myChart.dispatchAction({
      //   type: "downplay", //取消高亮
      //   seriesIndex: 0,
      //   dataIndex: this.index2,
      // });
      const data = this.dataList2.map((e) => {
        return {
          name: e.row_name,
          value: e.all_count,
        };
      });
      var option;

      option = {
        tooltip: {
          trigger: "item",
        },
        title: {
          text: "大洲占比(人数)",
          left: "20",
          top: 40,
          textStyle: {
            // 主标题样式
            fontSize: "20",
          },
        },
        legend: [
          {
            show: false,
            top: "30%",
            right: "5%",
            type: "scroll",
            orient: "vertical",
            align: "right",
          },
        ],
        series: [
          {
            name: "",
            type: "pie",
            radius: ["20%", "40%"],
            center: ["50%", "55%"],
            data: data,
            label: {
              //echarts饼图内部显示百分比设置
              show: true,
              position: "outside", //outside 外部显示  inside 内部显示
              formatter: function (name) {
                return name.name + "\n" + name.value + " (" + name.percent + "%" + ")"; //返回文本
              },
              color: "#0e3056", //颜色
              fontSize: 11, //字体大小
            },
          },
        ],
      };
      // let max = this.dataList2.reduce(
      //   //计算出最大值以及最大值对应的索引
      //   (a, c, i) => (c.all_count > a ? ((this.index2 = i), c.all_count) : a),
      //   0
      // );
      // this.dataList2.forEach((item, index) => {
      //   if (max == item.all_count) {
      //     this.index2 = index;
      //   }
      // });
      option && myChart.setOption(option);
      // myChart.dispatchAction({
      //   type: "highlight",
      //   seriesIndex: 0,
      //   dataIndex: this.index2,
      // });
    },
    setData(e) {
      this.active = e;
      if (e == "邀请") {
        this.dataList = [
          { row_name: "媒体", all_count: 1 },
          { row_name: "政府单位", all_count: 19 },
          { row_name: "港口单位", all_count: 84 },
          { row_name: "研究机构及高校", all_count: 5 },
          { row_name: "科技、金融、工程等配套单位", all_count: 70 },
          { row_name: "组织协会", all_count: 5 },
          { row_name: "航运物流单位", all_count: 19 },
          { row_name: "货主单位", all_count: 7 },
          { row_name: "集团", all_count: 9 },
        ];
      } else if (e == "报名") {
        this.dataList = [
          { row_name: "媒体", all_count: 10 },
          { row_name: "政府单位", all_count: 1 },
          { row_name: "港口单位", all_count: 4 },
          { row_name: "研究机构及高校", all_count: 50 },
          { row_name: "科技、金融、工程等配套单位", all_count: 4 },
          { row_name: "组织协会", all_count: 35 },
          { row_name: "航运物流单位", all_count: 89 },
          { row_name: "货主单位", all_count: 71 },
          { row_name: "集团", all_count: 19 },
        ];
      } else {
        this.dataList = [
          { row_name: "媒体", all_count: 5 },
          { row_name: "政府单位", all_count: 46 },
          { row_name: "港口单位", all_count: 3 },
          { row_name: "研究机构及高校", all_count: 5 },
          { row_name: "科技、金融、工程等配套单位", all_count: 30 },
          { row_name: "组织协会", all_count: 3 },
          { row_name: "航运物流单位", all_count: 9 },
          { row_name: "货主单位", all_count: 71 },
          { row_name: "集团", all_count: 40 },
        ];
      }
      this.getEcharts3();
    },
    setData2(e) {
      this.active2 = e;
      if (e == "邀请") {
        this.dataList2 = [
          { row_name: "未知", all_count: 4 },
          { row_name: "亚洲", all_count: 90 },
          { row_name: "北美洲", all_count: 13 },
          { row_name: "国际", all_count: 3 },
          { row_name: "大洋洲", all_count: 3 },
          { row_name: "欧洲", all_count: 60 },
          { row_name: "非洲", all_count: 11 },
        ];
      } else if (e == "报名") {
        this.dataList2 = [
          { row_name: "未知", all_count: 1 },
          { row_name: "亚洲", all_count: 19 },
          { row_name: "北美洲", all_count: 84 },
          { row_name: "国际", all_count: 5 },
          { row_name: "大洋洲", all_count: 4 },
          { row_name: "欧洲", all_count: 5 },
          { row_name: "非洲", all_count: 49 },
        ];
      } else {
        this.dataList2 = [
          { row_name: "未知", all_count: 40 },
          { row_name: "亚洲", all_count: 8 },
          { row_name: "北美洲", all_count: 53 },
          { row_name: "国际", all_count: 36 },
          { row_name: "大洋洲", all_count: 23 },
          { row_name: "欧洲", all_count: 5 },
          { row_name: "非洲", all_count: 11 },
        ];
      }
      this.getEcharts4();
    },
    getBack(index, e) {
      this.BackIndex = index;
    },
    getBack2(index) {
      this.BackIndex = 10;
    },
  },
};
</script>

<style scoped lang="scss">
.hello {
  background: #f3f3f4;
  padding: 10px;
  .top {
    width: 100%;
    .day {
      background: white;
      padding: 2px;
      border-radius: 5px;
      width: 100%;
      position: relative;
      height: 200px;
      margin-bottom: 20px;
      .day_top {
        display: flex;
        justify-content: center;
        color: #0b4ca0;
        font-size: 30px;
        font-weight: 700;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #e8e8e8;
        img {
          width: 60px;
          height: 60px;
          margin-right: 5px;
        }
        span {
          font-weight: 400;
        }
      }
      .day_bottom {
        display: flex;
        justify-content: center;
        color: #21d752;
        font-size: 16px;
        align-items: flex-end;
        position: absolute;
        bottom: 50px;
        left: 50%;
        width: 100%;
        transform: translate(-50%);
        position: absolute;
        bottom: 20px;
        .number {
          font-size: 80px;
          line-height: 55px;
          color: #044eb3;
          font-weight: 700;
          margin: 3px 10px;
        }
        .mont {
          font-size: 25px;
        }
      }
    }
    .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      .box_item {
        width: 100%;
        margin-top: 10px;
        font-weight: 600;

        .item_top {
          display: flex;
          width: 100%;
          font-size: 20px;
          .right {
            width: 40%;
            height: 40px;
            background-color: white;
            position: relative;
            text-align: center;
            line-height: 40px;
            color: #0e3056;
            border-radius: 0 5px 0 0;
          }
          .left {
            width: 60%;
            height: 40px;
            background-color: #0e3056;
            position: relative;
            text-align: center;
            line-height: 40px;
            color: white;
            border-radius: 5px 0 0 0;
            .sanjiao {
              position: absolute;
              right: -20px;
              top: 0px;
              border-left: 20px solid transparent;
              border-right: 20px solid transparent;
              border-bottom: 40px solid white;
            }
            .sanjiao2 {
              position: absolute;
              right: -20px;
              top: 0px;
              border-left: 20px solid transparent;
              border-right: 20px solid transparent;
              border-bottom: 40px solid #0e3056;
            }
          }
        }
        .item_top2 {
          background: #0e3056;
          text-align: center;
          color: white;
          justify-content: center;
          line-height: 40px;
          border-radius: 5px 5px 0 0;
        }
        .item-bottom {
          border-radius: 0 0 5px 5px;
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          background-color: #044377;
          color: white;
          font-size: 18px;
          padding: 25px;
          .item-left {
            img {
              width: 50px;
              height: 50px;
              margin-bottom: 20px;
            }
            .num {
              display: flex;
              line-height: 21px;
              .insert {
                margin-right: 10px;
              }
            }
          }
          .number {
            font-size: 53px;
            font-weight: 900;
            line-height: 47px;
          }
        }
      }
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    #main {
      width: 100%;
      height: 450px;
      background: white;
      margin-top: 20px;
      border-radius: 5px;
    }
    #main2 {
      width: 100%;
      height: 450px;
      background: white;
      margin-top: 20px;
      border-radius: 5px;
    }
    .echartsBox {
      width: 100%;
      height: 450px;
      background: white;
      margin-top: 20px;
      position: relative;

      .btn {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 999;
        display: flex;
        color: #8f9297;
        margin: 40px 10px;

        div {
          border: 1px solid #cbd4dd;
          width: 50px;
          text-align: center;
          height: 27px;
          line-height: 27px;
          font-size: 15px;
          margin-right: 5px;
          border-radius: 9px;
          cursor: pointer;
        }
      }
      #main3 {
        width: 100%;
        height: 450px;
        border-radius: 5px;
      }
      #main4 {
        width: 100%;
        height: 450px;
        border-radius: 5px;
      }
    }
  }
}
.active {
  background: #0e3056;
  border: 1px solid #0e3056;
  color: white;
}
</style>
